<template>
  <div class="iconDom">
    <div class="fixIcon" @click="alertShow">
      <van-icon name="plus" />
    </div>
    <van-popup v-model="show" round position="bottom" class="van-popup1">
      <van-grid class="iconBox3" :border="false" :column-num="4">
        <van-grid-item :icon="icongm" text="发布求购" @click="setformAlert(1)" />
        <van-grid-item :icon="icongy" text="发布供应" @click="setformAlert(0)" />
        <van-grid-item :icon="icongq" text="我的求购" @click="setformAlert(2)" />
        <van-grid-item :icon="icongq" text="我的供应" @click="setformAlert(3)" />
      </van-grid>
      <div class="iconBox1" @click="cancleShow">
        <van-icon name="cross" />
      </div>
    </van-popup>
    <van-popup @click-overlay="closeShow" v-model="showlogin" round>
      <loginForm class="loginmodules"></loginForm>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import icongy from "../../assets/img/replaypart/icongy.png";
import icongq from "../../assets/img/replaypart/icongq.png";
import icongm from "../../assets/img/replaypart/icongm.png";
import loginForm from "../../components/login/index";
export default {
  components: {
    loginForm
  },
  data() {
    return {
      show: false,
      icongy,
      icongq,
      icongm,
      showlogin: false
    };
  },
  computed: {
    setshow() {
      return this.$store.state.nocaches.loginmoduleshow;
    }
  },
  watch: {
    setshow(news, old) {
      this.showlogin = news;
    }
  },
  created() {
    this.$store.commit("muloginmoduleshow", false);
  },
  methods: {
    showloginway() {
      this.$store.commit("muloginmoduleshow", true);
    },
    closeShow() {
      this.$store.commit("muloginmoduleshow", false);
    },
    alertShow() {
      if (this.$store.state.islogin) {
        this.show = true;
      } else {
        this.$store.commit("muloginmoduleshow", true);
      }
    },
    cancleShow() {
      this.show = false;
    },
    setformAlert(i) {
      this.show = false;
      let obj = {};
      obj.show = true;
      obj.type = i;
      if (i == 0) {
        obj.text = "发布供应";
        this.$store.dispatch("acreplayformShow", obj);
      } else if (i == 1) {
        obj.text = "发布求购";
        this.$store.dispatch("acreplayformShow", obj);
      } else if (i == 2) {
        this.$router.push({ path: "/qgList", query: { type: 1 } });
      } else if (i == 3) {
        this.$router.push({ path: "/qgList", query: { type: 0 } });
      }
    }
  }
};
</script>

<style scoped lang="less">
.fixIcon {
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  background: #e49829;
  position: fixed;
  bottom: 3rem;
  right: 0.3rem;
  font-size: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
.van-popup1 {
  display: flex;
  height: 2.2rem;
  padding: 0.46rem 0;
  .iconBox3 {
    flex: 4;
  }
  .iconBox1 {
    flex: 1;
    border-left: 0.01rem solid rgba(229, 229, 229, 1);
    font-size: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e49829;
  }
}
.loginmodules{
  padding-top: .5rem !important;
}
</style>
